<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>首页</title>

		<link rel="stylesheet" href="style/less.css" />
		<script src="Resources/flexible.debug.js"></script>
		<script src="Resources/flexible_css.debug.js"></script>
		<script src="Resources/jquery-3.2.0.js"></script>
		<script src="Resources/swiper/swiper-3.4.2.jquery.min.js"></script>
		<link rel="stylesheet" href="style/swiper-3.4.2.min.css" />
		<script src="Resources/artTemplate.js"></script>
		<link rel="stylesheet" href="style/footer.css" />
	</head>

	<body>
		<header class="head">
			<ul class="list">
				<li class="li_one">首页</li>
				<li></li>
				<li class="li_two"><img class="img" src="imges/qietu/redTen.png" /></li>
			</ul>
		</header>
		<nav class="nav">
			<div class="swiper-container test">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="box"><span>每日精选  </span><span>美容时尚</span><span>美容时尚</span><span>没事手札</span></div>
					</div>
					<div class="swiper-slide">
						<div class="box"><span>没事手札</span><span>朱家生活</span><span id="haoping">影视好评</span></div>
					</div>

				</div>

			</div>

		</nav>

		<div id="big" class="swiper-container ">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="imges/qietu/lunbo.png" />
				</div>
				<div class="swiper-slide">
					<img src="imges/qietu/lunbo.png" />
				</div>
				<div class="swiper-slide">
					<img src="imges/qietu/lunbo.png" />
				</div>

			</div>

		</div>

		<!--接收模板-->
		<section id="section">

		</section>
		<!--接收模板-->

		<footer class="footer_bottom">

			<dl>
				<dd><img class="get" src="imges/qietu/redhome.png" /></dd><dt>首页</dt>
			</dl>
			<dl id="task_html">
				<dd><img class="get" src="imges/qietu/eag.png" /></dd><dt>发现</dt>
			</dl>
			<dl id="shop_html">
				<dd><img class="get" src="imges/qietu/cccshop.png" /></dd><dt>商店</dt>
			</dl>
			<dl id="my_html">
				<dd><img class="get" src="imges/qietu/opop.png" /></dd><dt>我</dt>
			</dl>

		</footer>
		<em class="em">
    		
    </em>

		<div id="big2" class="swiper-container ">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="imges/qietu/lunbo.png" />
				</div>
				<div class="swiper-slide">
					<img src="imges/qietu/lunbo.png" />
				</div>
				<div class="swiper-slide">
					<img src="imges/qietu/lunbo.png" />
				</div>

			</div>

		</div>

		<!-- 模板-->
		<script type="text/html" id="temp">
			{{each list as v}}
			<div class="div_box">
				<p class="main"><img class="img_woman" src='{{v.img}}' /><span class="span_3d">{{v.name}}</span></p>
				<dl class="dl">
					<dd>
						<h3 class="h3">{{v.font}}</h3>
						<p class="foot_one">{{v.foot}}</p>
					</dd>
					<dt><img class="img_photo" src="{{v.photo}}"/></dt>
				</dl>
				<p class="bottom"><img class="th" src="imges/qietu/eag.png" /><span class="spanbi">{{v.number}}</span><img class="th" src="imges/qietu/hot.png" /><span class="spanbi">{{v.xing}}</span></p>
			</div>
			{{/each}}
		</script>
		<!-- 模板-->
		<script>
		$("#haoping").click(function(){
			location.href = "html/video.html"
		})
		$("#my_html").click(function(){
			location.href = "html/my.html"
		})
		$("#shop_html").click(function(){
			location.href = "../src/html/shoping.html"
		})
		$("#task_html").click(function(){
			location.href = "../src/html/task.html"
		})
			$("#big").click(function() {
				$(".em").show(300);
				$("#big2").show(300)

			})
			$("body").on("click", ".em", function() {
				$(".em").hide(300);
				$("#big2").hide(300)
			})
			var mySwiper = new Swiper('.test', {
				//  direction: '',

				freeMode: true,
				pagination: '.swiper-pagination',
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',

			})
			var mySwiper = new Swiper('#big', {
				//  direction: '',
				loop: true,
				autoplay: 3000

			})
			var mySwiper = new Swiper('#big2', {
				//  direction: '',
				loop: true,
				autoplay: 3000

			})

			$.ajax({
				type: "get",
				url: "ajax/json.json",
				async: true,
				success: function(data) {
					var str = template("temp", {
						list: data
					});
					$("#section").append(str)
				}
			});
		</script>
	</body>

</html>